<!--
 * @Author: DaHuaZhuXi
 * @Date: 2020-11-18 10:24:56
 * @LastEditTime: 2020-12-03 19:37:17
 * @LastEditors: DaHuaZhuXi
 * @Description: 后台首页
-->

<template>
  <div class="">
    <div id="myEcharts" style="height: 400px"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ComponentA extends Vue {
  hello = this.$store.state.test0;

  mounted() {
    // 基于准备好的dom，初始化 echarts 实例并绘制图表。
    const ele = document.getElementById('myEcharts') as HTMLDivElement;
    const chart = window.$echarts.init(ele);

    chart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' },
          ],
        },
      ],
    });
  }

  // @computed
  get computedMsg(): string {
    return '';
  }

  // @method
  greet() {
    //
  }
}
</script>

<style lang="scss">
</style>
